<template>
  <!-- 数据呈现 -->
  <div class="info">
    <el-table :data="list" stripe>
      <el-table-column prop="accessKeyId" label="开发者key" />
      <el-table-column prop="description" label="配置描述" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="success" @click="selectConfig(scope.row)" size="small">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageComp :page="page" @page-change="query"></PageComp>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElMessage, ElTable, ElTableColumn } from 'element-plus'
import { BaseDataResult, BasePageVO, PageBean } from '../ts/types/BaseResult'

import { TbOssConfig } from '../ts/types/Oss'
import { ApiService } from '../ts/ApiService'
import { log } from '../ts/logger'
import PageComp from './PageComp.vue'

const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const list = ref([] as Array<TbOssConfig>)

const emits = defineEmits(['config-selected'])

const query = () => {
  ApiService.get(`/oss/config/${page.value.pageSize}/${page.value.pageNumber}`, {}, (data: BaseDataResult<BasePageVO<Array<TbOssConfig>>>) => {
    if (data.success) {
      list.value = data.data.data
      page.value = data.data.pageBean
      return
    }
    ElMessage.error(data.message)
  })
}

const selectConfig = (config: TbOssConfig) => {
  log.debug('选中的配置', config)
  emits('config-selected', JSON.parse(JSON.stringify(config)))
}

query()
</script>

<style scoped lang="scss">
.info {
  padding: 1rem;
}
</style>
